<template>
	<view class="p30">
		<view v-if="$validatenull(deviceData)">
			<cust-empty desc="暂无车辆,请前往绑定!" btnText="前往绑定" :showDefaultBtn="true"
				@clickBtn="$navigateTo('/pagesMy/views/addDevice')">
			</cust-empty>
		</view>
		<view v-else>
			<view class="cust-fix-top">
				<view class="flex-align-center" @click="selectBike">
					<text class="f36 bold mr10">{{car.nickName}}</text>
					<u-icon name="xiasanjiaoxing" color="#AAB1C2" size="12" :isShowIcon="false"
						customPrefix="iconfontbike iconbike">
					</u-icon>
				</view>
			</view>
			<view class="h90"></view>

			<cust-empty desc="暂无数据" v-if="loadStatus=='none'">
			</cust-empty>
			<view>
				<u-checkbox-group v-model="selection" activeColor="#06B7F3" placement="column">
					<view @longpress="showSelect" v-for="item in list" :key="item.id">
						<feedback>
							<template v-slot:header>
								<view class="flex-between">
									<text>{{item.maintainTime}}</text>
									<text>{{item.mileage}}KM</text>
									<text class="c-warn">￥{{item.expenses}}</text>
									<u-checkbox v-if="selectMode" :name="item.id" shape="circle" label="选中">
									</u-checkbox>
								</view>
							</template>
							<template v-slot:content>
								<view @click="seeDetailFun(item)">
									<view class="flex-wrap" v-if="item.maintainName">
										<view class="circle-tag" v-for="name in item.maintainName.split(',')"
											:key="name">
											{{name}}
										</view>

									</view>
									<view class="pb30" :class="[item.attachList && item.attachList.length ? 'bb' : '']">
										{{item.remark}}
									</view>
									<view class="flex-wrap ptb30" v-if="item.attachList && item.attachList.length">
										<view class="mr20 border" v-for="(attach,index) in item.attachList"
											:key="attach.id" @click.stop="previewImageFun(index,item.attachList)">
											<image :src="attach.link" style="width: 40px;height: 40px;"></image>
										</view>
									</view>
								</view>

							</template>
						</feedback>
					</view>

				</u-checkbox-group>
			</view>
			<view class="nomore" v-if="loadStatus != 'none'">
				<u-loadmore :status="loadStatus" />
			</view>
			<u-action-sheet :actions="bikeList" :props="props" title="选择车辆" :show="show" @select="selectClick"
				round="15" @close="close">
			</u-action-sheet>

			<!-- <view v-if="!selectMode" class="flex-center" :class="[list.length?'cust-fix-bottom':'']"> -->
			<view v-if="!selectMode" class="flex-center cust-fix-bottom">
				<!-- <view :class="[list.length?'bottom-box':'mt100']"> -->
				<view class="bottom-box">
					<u-button :customStyle="{width: '150px'}" type="primary" text="新增保养" :throttleTime="1000"
						@click="toAdd">
					</u-button>
				</view>
			</view>

			<u-modal :show="delConfirmDia" :title="delConfirmDiaTitle" :content="delConfirmDiaContent"
				:confirmText="delConfirmDiaYesBtn" :showCancelButton="true" :cancelText="delConfirmDiaNoBtn"
				@confirm="handleDel" @cancel="hideDelConfirmDia"></u-modal>
			<view v-if="selectMode" class="h140"></view>
			<fix-bottom-del v-if="selectMode" @cancel="handleCancel" @del="showDelConfirmDia"></fix-bottom-del>
		</view>
	</view>
</template>

<script>
	import Feedback from "../components/feedback";
	import FixBottomDel from "../components/fix-bottom-del";
	import delConfirm from "@/mixins/delConfirm";
	import {
		getMaintainListAPI,
		removeMaintainAPI
	} from "@/api/api/maintain.js"
	import pages from "@/mixins/pages.js"
	import {
		getStoreSyncUtil
	} from "@/utils/store.js"
	import custEmpty from "@/components/cust-empty/index.vue";
	import {
		getCarListAPI,
	} from "@/api/api/car.js"
	import {
		mapState
	} from 'vuex';
	import {
		throttle
	} from '@/utils/utils.js'

	export default {
		components: {
			Feedback,
			FixBottomDel,
			custEmpty
		},
		mixins: [delConfirm, pages],
		data() {
			return {
				isRefresh:true,
				show: false,
				selection: [],
				props: {
					name: 'nickName'
				},
				selectMode: false,
				car: '',
				bikeList: [],
			}
		},
		onShow() {
			if(this.isRefresh){
				if (!this.$validatenull(this.deviceData)) {
					this.showPropListCallcack = (obj, item) => {
						return {
							id: item.id,
							maintainTime: item.maintainTime,
							mileage: item.mileage,
							expenses: item.expenses,
							attachList: item.attachList,
							maintainName: item.maintainName,
							remark: item.remark
						}
					};
					this.funAPI = getMaintainListAPI;
					this.params = {
						clientSource: 2,
						carId: this.deviceData.id,
					}
					this.initList();
					this.getListFun();
					this.getCarListFun();
				}
				this.isRefresh=false;
			}
		},
		computed: {
			...mapState(["deviceData"])
		},
		methods: {
			toAdd:throttle(function(){
				this.$navigateTo('/pagesMy/views/maintainForm?title=新增');
			}),
			getCarListFun() {
				getCarListAPI().then(([err, data]) => {
					if (err) return;
					this.bikeList = data.records;
					this.bikeList.forEach((item) => {
						if (item.id == this.deviceData.id) {
							this.car = item;
						}
					})
				})
			},
			// 多张 图片预览
			previewImageFun:throttle(function(index, list){ // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
				let photoList = list.map(item => { // item 获取到的图片地址
					return item.link;
				});
				uni.previewImage({
					current: index, // 当前显示图片的索引值
					urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
				})
			}),
			seeDetailFun:throttle(function(item){
				this.$store.commit("setMaintainForm", item);
				this.$navigateTo('/pagesMy/views/maintainForm?title=修改');
			}),
			selectBike:throttle(function(){
				this.show = true;
			}),
			selectClick(index) {
				this.show = false;
				this.car = index;
				this.params.carId = this.car.id,
					this.initList();
				this.getListFun();
			},
			close() {
				this.show = false;
			},

			showSelect() {
				this.selectMode = true
			},

			handleCancel() {
				this.selection = []
				this.selectMode = false
			},

			handleDel() {
				this.hideDelConfirmDia()
				removeMaintainAPI(this.selection.join(",")).then(([err, data]) => {
					if (err) return;
					uni.showToast({
						title: '删除成功'
					});
					this.initList();
					this.getListFun();
				})
				this.handleCancel()
			}
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	::v-deep .u-checkbox {
		height: 24px;
		width: 55px;
		justify-content: center;
		position: relative;
		transform: translateX(10px);

		&>text {
			transform: scale(2);
			position: absolute;
			left: 10px;
			color: #ffffff00 !important;
			z-index: 3;
		}
	}
</style>
